<template>
    <div class="news">
        <div class="news-list">
            <a @click="toDetail(item)" 
                v-for="(item, index) in newsList" :key="index">{{item.title }}</a>
        </div>
        <div class="news-content">
            <router-view></router-view>
        </div>
    </div>

</template>

<script lang="ts" setup name="News">
import { onMounted, reactive, watch  } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const route = useRoute()


const newsList = reactive([
    { id: 1, title: '新闻1' },
    { id: 2, title: '新闻2' },
    { id: 3, title: '新闻3' },
    { id: 4, title: '新闻4' },
    { id: 5, title: '新闻5' },
])

const router = useRouter()

onMounted(() => {
    toDetail(newsList[0])
})

watch(() => route.query.id, (id, oldId) => {
    console.log('id', id, 'oldId', oldId)
    const item = newsList.find(item => item.id === Number(id))
    if (!item) {
        const item = newsList.find(item => item.id === Number(oldId))
        toDetail(item)
    }
})


function toDetail(item) {
    router.push({ path: '/news', query: { id: item.id, title: item.title } }) 
}
</script>

<style>
.news {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.news-list {
    display: flex;
    flex-direction: column;
}
.news-content {
    flex: 1;
    border: 1px solid #6c10a1;
}
</style>
